<template>
  <div class="app-container">
    <el-dialog title="选择分发部门" :visible.sync="dialogFormVisible">
      <el-checkbox-group v-model="form.departments">
        <el-checkbox v-for="item in departments" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeType">确 定</el-button>
      </div>
    </el-dialog>
    <!--工具栏-->
    <div class="head-container">
      <eHeader :permission="permission" />
      <crudOperation :permission="permission" :async="true">
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" border :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column label="序号" width="50px" align="center" :resizable="false">
        <template slot-scope="scope" class = "display">
          <div>{{ scope.$index+(crud.currentPage - 1) * crud.pageLimit + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="enterpriseName" label="企业名称" :resizable="false"/>
      <el-table-column prop="demandType" label="诉求类型" :resizable="false">
        <template  slot-scope="scope">
          <!-- {{scope.row.demandType}} -->
          <el-tag size="mini" v-if='scope.row.demandType == 1' >要素保障</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 2' >人力社保</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 3' >安全生产</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 4'>市场监督</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 5' >政策咨询</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 6' >融资贷款</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 7' >市场销售</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 8' >法律咨询</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 9' >企业发展</el-tag>
          <el-tag size="mini" v-if='scope.row.demandType == 10' >其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="submitter" label="提交人" :resizable="false"/>
      <el-table-column prop="contact" label="联系方式" :resizable="false"></el-table-column>
      <el-table-column prop="statusId" label="诉求状态" :resizable="false">
         <template  slot-scope="scope">
          <!-- {{scope.row.demandType}} -->
           <div v-if="scope.row.admin">
            <el-tag size="mini" v-if='scope.row.statusId == 1' type='warning'>待分发</el-tag>
            <el-tag size="mini" v-if='scope.row.statusId == 2' type='info'>办理中</el-tag>
            <el-tag size="mini" v-if='scope.row.statusId == 3' type='success' >完成</el-tag>
           </div>
           <div v-else>
             <el-tag size="mini" v-if='!scope.row.deptProcessStatus || scope.row.deptProcessStatus[0].demand_status == 2' type='warning'>处理中</el-tag>
             <el-tag size="mini" v-else type='info'>已处理</el-tag>
           </div>
        </template>
      </el-table-column>
      <el-table-column prop="deptName" label="处理部门" :resizable="false"/>
      <!--   编辑与删除   -->
      <el-table-column
        label="操作"
        width="250px"
        align="center"
        fixed="right"
        :resizable="false"
      >
        <template slot-scope="scope">
<!--          :hiddenEdit='scope.row.statusId == 3 ? true : false'-->
          <udOperation
            :data="scope.row"
            :permission="permission"
            :hiddenDle='true'
            :hiddenEdit="user.roleName != '管理员' || scope.row.createType != 2"
            async
          >
            <el-button v-if="user.roleName != '管理员' &&  scope.row.deptProcessStatus[0].demand_status == 2" slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-s-check"  title="处理"  @click="doView(scope.row.demandId)" />
            <el-button v-else slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-view"  title="查看"  @click="doView(scope.row.demandId)" />
            <el-button v-if="user.roleName == '管理员' && scope.row.canAdminReply" slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-s-check"  title="处理"  @click="doView(scope.row.demandId, true)" />

            <el-button slot="left" v-show='scope.row.statusId == 1' class="option-item" size="mini" type="success" plain icon="el-icon-refresh"  title="流转其他部门"  @click="changeItem(scope.row.demandId)" />
          </udOperation>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import crudLandlord from '@/api/business/demand'
import eHeader from './module/header'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
const addPageUrl = '/business/landlord/add';
const editPageUrl = '/business/landlord/edit';
export default {
  name: 'LandlordList',
  components: { eHeader, crudOperation, pagination, udOperation },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  cruds() {
    return CRUD({
      title: '诉求汇总',
      url: 'business/demand/queryPage',
      crudMethod: { ...crudLandlord },
      addPage: true,
      addPageUrl: addPageUrl,
      editPage: true,
      editPageUrl: editPageUrl,
      editParams: ['demandId'],
      optShow: {
        add: true,
        edit: false,
        del: false,
        reset: true,
      },
      query: {
        // status: 0,
      }
    })
  },

  mixins: [presenter()],
  // 数据字典

  data() {
    return {
      permission: {
        add: [],
        edit: [],
        del: [],
        info: []
      },
      landlordId: null,
      dialogFormVisible: false,
      form: {
        departments: [],
        demandId: null,
      },
      departments: [
        { value: 0, label: '企服' },
        { value: 1, label: '便民' },
        { value: 2, label: '招商1' },
        { value: 3, label: '招商2' },
        { value: 4, label: '经发' },
        { value: 5, label: '科技人才' },
        { value: 6, label: '统计' },
        { value: 7, label: '安监' },
        { value: 8, label: '环保' },
        { value: 9, label: '建设' },
        { value: 10, label: '资规' },
        { value: 11, label: '总工会' },
        { value: 12, label: '消安委' },
        { value: 13, label: '联动' },
        { value: 14, label: '城管' },
        { value: 15, label: '公安' },
        { value: 16, label: '交警' },
        { value: 17, label: '文教' },
        { value: 18, label: '农经农技' },
        { value: 19, label: '水利' },
        { value: 20, label: '人社' },
        { value: 21, label: '司法' },
        { value: 22, label: '商会' },
      ]
    }
  },

  created() {
    console.log(this.permission, 'permission')
    store.dispatch('GetInfo')
  },

  methods: {
    doView(id, flag) {
      // console.log(id, 'id')
      this.$router.push({
        path: '/business/landlord/detail',
        query: {
          id,
          replay: flag
        },
      })
    },
    addPlan() {
      this.$router.push('/business/landlord/add')
    },
    changeItem(id) {
      this.form.demandId = id
      this.dialogFormVisible = true
    },
    changeType() {
      if (!this.form.departments.length) {
        this.$message({
          message: '请选择分发部门',
          type: 'warning'
        });
        return
      }
      this.form.departments = this.form.departments.join()
      crudLandlord.next(this.form).then((res) => {
        if (res.msg === 'success') {
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '修改信息成功',
            type: 'success',
            duration: 2000
          })
          this.crud.refresh()
          this.form.departments = []
        }
      }).catch(err => {
        console.log(err)
        this.form.departments = []
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
 ::v-deep .svg-icon {
   vertical-align: middle;
 }
 /* Tooltip 文本 */
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 40px;
   background-color: #666;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

   /* 定位 */
   position: absolute;
   z-index: 1;
   right: 28px;
   top: 0;
 }

 /* 鼠标移动上去后显示提示框 */
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
</style>

<style>
 .el-table th.el-table__cell > .cell{
  text-align: center;
  color: black
 }
</style>
